import React, { useState } from 'react'
import { Form, Input,Button,Toast } from 'antd-mobile'
import axios from 'axios'
import './index.css'
import { useNavigate } from 'react-router-dom'
export default function Shou() {
    const navigator =useNavigate()
    const [yanzhengma, setyanzhengma] = useState('')
    const [phone, setphone] = useState('')
    let yan=()=>{
        axios.post('http://localhost:3000/yzk/get_sms',{phone}).then(res=>{
            Toast.show({
                icon: 'success',
                content: '发送成功',
              })
        })
    }
    let deng=()=>{
        axios.post("http://localhost:3000/yzk/login_phone",{phone,yanzhengma}).then(res=>{
            if(res.data.code===0){
                    Toast.show({
                      icon: 'success',
                      content: '登录成功',
                    })
            }
        })
    }
    let zhu = ()=>{
        navigator('/zhuce')
    }
    return (
        <div style={{backgroundImage:"./u504.png"}}>
            <h4>手机验证码登录</h4>
            
            <Form layout='horizontal'>
                <Form.Item label='手机号' name='phone'>
                    <Input placeholder='请输入手机号' clearable value={phone} onChange={(e) => setphone(e)} />
                </Form.Item>
                <Form.Item
                    label='验证码'
                    extra={
                        <div>
                            <span onClick={()=>{yan()}}>发送验证码</span>
                        </div>
                    }
                >
                    <Input placeholder='请输入验证码' clearable value={yanzhengma} onChange={(e) => { setyanzhengma(e) }} />
                </Form.Item>
            </Form>
            <Button color='primary' fill='outline' className='but' onClick={()=>{deng()}}>
                    登录
            </Button>
            <Button color='primary' fill='outline' className='but' onClick={()=>{zhu()}}>
                    注册
            </Button>
            <img src='../u506.png' alt='' title='aaa' />
        </div>
    )
}
